<template>
	<navigatorComp
		:title="isManager ? '管理成员' : '查看成员'"
		bgcColor="#121512"
		fontColor="#fff"
	></navigatorComp>

	<mescroll-uni
		:height="height + 'px'"
		:up="upOption"
		@init="mescrollInit"
		@down="myDownCallback"
		@up="upCallback"
	>
		<view class="clan_memberList">
			<view class="clan_member" v-for="(item, index) in memberList">
				<view class="display_flex">
					<image
						class="clan_member_avater"
						src="http://112.124.50.179:8888/imgs/default_avater.png"
						mode=""
					></image>
					<view class="clan_member_name">{{ item.nickname }}</view>
					<view class="clan_member_manager" v-if="createUserId == item.userId">
						发起人
					</view>
				</view>
				<image
					v-if="
						(isManager && userId != item.userId) ||
						(!isManager && userId == item.userId)
					"
					@click="showMore(item)"
					class="clan_member_more"
					src="http://112.124.50.179:8888/imgs/home/white_more.png"
					mode=""
				></image>
			</view>
		</view>
	</mescroll-uni>

	<!-- 按钮弹框 -->
	<u-popup
		:show="showMoreFunc"
		bgColor="rgba(0,0,0,0)"
		@close="closeMore"
		custom-style="padding:0 16rpx 0;"
	>
		<u-button
			@click="confirmDel"
			v-if="createUserId == userId"
			shape="circle"
			:custom-style="moreBtnStyle"
		>
			移除成员
		</u-button>
		<u-button v-else shape="circle" :custom-style="moreBtnStyle" @click="exitClan">
			退出族谱
		</u-button>
		<u-button
			shape="circle"
			:custom-style="{ ...moreBtnStyle, fontWeight: 600 }"
			@click="closeMore"
		>
			取消
		</u-button>
	</u-popup>

	<!-- 删除确认框 -->
	<myModel
		v-model:show="showDelModel"
		title="移除成员"
		content="移除成员之后,此成员无法查看此族谱的数据"
		@confirm="confirmModel"
	></myModel>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import myModel from '/components/model/index.vue';
import HomeApi from '@/API/home/index.js';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
const homeApi = new HomeApi();

const memberList = ref(); //成员列表
const genealogyId = ref(0); //族谱id
const createUserId = ref(0); //族谱创建人员的id
const userId = uni.getStorageSync('userInfo').userId; //当前用户的id
const currentUserId = ref(0); //点击更多的userId
const isManager = ref(false); //是否是管理人员

const { mescrollInit, downCallback, getMescroll } = useMescroll(); // 调用mescroll的hook
const upOption = {
	page: {
		size: 10 // 每页数据的数量
	},
	noMoreSize: 4 //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
	// empty: {
	// 	use: false //不显示空图
	// }
};
const lastId = ref(0); //最后一个元素的id
const height = ref(0); //翻页组件高度

// 更多按钮
const showMoreFunc = ref(false);
const moreBtnStyle = {
	height: '120rpx',
	borderRadius: '26rpx 26rpx 26rpx 26rpx',
	backgroundColor: '#fff',
	fontWeight: '400',
	fontSize: '40rpx',
	color: '#007AFF',
	marginBottom: '16rpx'
};
const showDelModel = ref(false);

onLoad((options) => {
	genealogyId.value = options.genealogyId;
	createUserId.value = options.createUserId; //创建的用户id
	if (options.createUserId == userId) {
		isManager.value = true;
	} else {
		isManager.value = false;
	}

	// #ifdef MP-WEIXIN
	height.value =
		uni.getSystemInfoSync().screenHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight;
	// #endif

	// #ifdef APP || H5
	height.value =
		uni.getSystemInfoSync().screenHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight -
		uni.upx2px(88);
	// #endif
});

/**
 * 上拉加载
 */
const upCallback = (mescroll) => {
	homeApi
		.getAdministratorsList({ genealogyId: genealogyId.value, latestId: lastId.value })
		.then((res) => {
			const curPageData = res.data.administratorsList || []; // 当前页数据
			if (lastId.value === 0) memberList.value = []; //如果是第一页需手动制空列表
			memberList.value = memberList.value.concat(curPageData); //追加新数据\
			if (curPageData.length > 0) {
				lastId.value = curPageData[curPageData.length - 1].administratorsId;
			}
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		})
		.catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		});
};

const myDownCallback = (mescroll) => {
	lastId.value = 0;
	downCallback();
};

const showMore = (item) => {
	showMoreFunc.value = true;
	currentUserId.value = item.userId;
};

const closeMore = () => {
	showMoreFunc.value = false;
};

/**
 * 点击移除成员
 */
const confirmDel = () => {
	showDelModel.value = true;
};

/**
 * 移除成员确认框——点击确认
 */
const confirmModel = () => {
	showDelModel.value = false;
	showMoreFunc.value = false;

	homeApi
		.deleteGenealogyAdministrators({
			deleteUserId: currentUserId.value,
			genealogyId: genealogyId.value
		})
		.then((res) => {
			if (res.code === 0) {
				uni.showToast({
					title: '移除成功！'
				});
				myDownCallback();
			}
		});
};

/**
 * 点击退出族谱
 */
const exitClan = () => {
	homeApi
		.quitAdministrators({
			deleteUserId: currentUserId.value,
			genealogyId: genealogyId.value
		})
		.then((res) => {
			if (res.code === 0) {
				uni.showToast({
					title: '退出成功！'
				});
				myDownCallback();
			}
		});
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	box-sizing: border-box;
	overflow: auto;
}

.clan_memberList {
	margin: 24rpx 32rpx;

	.clan_member {
		width: 100%;
		box-sizing: border-box;
		height: 128rpx;
		background: #292b2a;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;

		.clan_member_more {
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}

		.clan_member_avater {
			width: 80rpx;
			height: 80rpx;
			margin-right: 24rpx;
			border-radius: 50%;
		}

		.clan_member_name {
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 33rpx;
			margin-right: 12rpx;
		}

		.clan_member_manager {
			width: 86rpx;
			height: 34rpx;
			background: #f3e0bb;
			border-radius: 17rpx 17rpx 17rpx 17rpx;
			font-weight: 500;
			font-size: 18rpx;
			color: #524630;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
